import React, { PureComponent } from "react";
import { Flex ,Toast} from "antd-mobile";
import s from "./index.scss";
import { callApi } from "app/utils";
import { hashHistory } from "React-Router";
import risktest from "assets/images/risktest.png";
import risktest1 from "assets/images/risktest1.png";
import QueueAnim from "rc-queue-anim";

export default class extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      info: {},
      questions: [
        {
          question: "1.请问您的年龄处于",
          answers: ["A. 18-30岁", " B. 31-40岁", "C. 41-50岁", "D. 51-60岁"],
          correctAnswer: 1
        },
        {
          question: "2.您的健康状况为：",
          answers: [
            "A. 健康",
            " B. 一般",
            "C. 较弱",
            " D. 有严重疾病或身体伤残"
          ],
          correctAnswer: 1
        },
        {
          question: "3.您的家庭年收入为（折合人民币）?",
          answers: [
            "A. 5万元以下",
            "B. 5-20万元",
            " C. 20-50万元",
            " D. 50-100万元",
            " E. 100万元以上"
          ],
          correctAnswer: 1
        },
        {
          question:
            "4.您家庭预计进行投资理财的资金占家庭现有总资产（不含自住、自用房产及汽车等固定资产）的比例是：",
          answers: [
            "A. 70%以上",
            "B. 50-70%",
            "C. 30-50%",
            "D. 10-30%",
            "E. 10%以下"
          ],
          correctAnswer: 1
        },
        {
          question: "5.您的投资出现何种程度的波动时，您会呈现明显的焦虑：",
          answers: [
            "A. 本金无损失，但收益未达预期",
            "B. 出现轻微本金损失",
            "C. 本金10%以内的损失",
            "D. 本金20-50%的损失",
            " E. 本金50%以上的损失"
          ],
          correctAnswer: 3
        },
        {
          question:
            "6.假设有两种不同的投资：投资A预期获得5%的收益，有可能承担非常小的损失；投资B预期获得20%的收益，但有可能面临25%甚至更高的亏损。您将您的投资资产分配为： ",
          answers: [
            "A．全部投资于A",
            "B．大部分投资于A",
            "C．两种投资各一半；",
            "D．大部分投资于B",
            "E．全部投资于B"
          ],
          correctAnswer: 1
        },
        {
          question:
            "7.假如您前期用25元购入一只股票，该股现在升到30元，而根据预测该股近期有一半机会升到35元，另一半机会跌到25元，您现在会：",
          answers: [
            "A．立刻卖出",
            "B．部分卖出",
            "C．继续持有",
            " D．继续买入"
          ],
          correctAnswer: 1
        },
        {
          question:
            "8.同上题情况，该股现在已经跌到20元，而您估计该股近期有一半机会升回25元，另一半机会继续下跌到15元，您现在会：",
          answers: ["A. 立刻卖出", "B. 部分卖出", "C. 继续持有", "D. 继续买入"],
          correctAnswer: 1
        },
        {
          question: "9.您用于理财投资的资金不会用作其它用途的时间段为",
          answers: ["A. 短期：0到1年", "B. 中期：1到5年", " C. 长期：5年以上"],
          correctAnswer: 2
        },
        {
          question: "10.进行一项重大投资后，您通常会觉得： ",
          answers: [
            "A. 很高兴，对自己的决定很有信心",
            "B. 轻松，基本持乐观态度",
            "C. 基本没什么影响",
            "D. 比较担心投资结果",
            "E. 非常担心投资结果"
          ],
          correctAnswer: 3
        }
      ],
      resultStr: "",
      isResult: false,
      flag: 2,
      resultArr:[],
    }
   

    
  }

  componentDidMount() {
    //  callApi('/account/info',{token:JSON.parse(localStorage.getItem('userData')).token},"POST").then((data)=>{

    //  })
    if (localStorage.getItem("riskLevel") == null) {
      this.setState({
        isResult: false,
        flag:1
      });
    } else if (localStorage.getItem("riskLevel") == 0) {
      this.setState({
        isResult: false,
        flag:1
      });
    } else if (localStorage.getItem("riskLevel") == 1) {
      this.setState({
        isResult: true,
        resultStr: "进取型",
        flag:0
      });
    } else if (localStorage.getItem("riskLevel") == 2) {
      this.setState({
        isResult: true,
        resultStr: "稳健型",
        flag:0
      });
    } else {
      this.setState({
        isResult: true,
        resultStr: "保守型",
        flag:0
      });
    }
    // setTimeout(()=>{
    //     this.setState({flag:1})
    // },2000)
    // setTimeout(()=>{
    //     this.setState({flag:0})
    // },4000)
  }
  next(cur) {

    let that = this
    if(cur==0){
        let temp = that.state.resultArr.join(',')
        callApi('/user/test/risk/level',{token:JSON.parse(localStorage.getItem('userData')).token,result:temp},"POST").then((data)=>{
            console.log(data)
            if(data.success==true){
                that.setState({
                    flag: cur,
                    resultStr:data.data.msg,
                  });
                  localStorage.setItem('riskLevel',data.data.level)
                  return false
            }
        })
    }
    if(cur==2){
        this.setState({resultArr:[]})
    }
    if(that.state.resultArr[cur-3]==null&&cur>2){
        Toast.info('还未选择',1)
        return false
    }
    this.setState({
      flag: cur
    });
   
    console.log(cur)
  }
  prev(cur) {
  let that = this
    this.setState({
      flag: cur
    },()=>{
        that.state.resultArr[cur-1]=null
     
        
    });
    
    console.log(cur)
  }
  onSelect(cur1,cur2){
      this.state.resultArr[cur1] = cur2;
      this.forceUpdate()
      console.log(this.state.resultArr)
  }

  render() {
      let ques = this.state.questions
      let {resultArr} = this.state
      let that = this
      
    return (
      <div className={`${s.risktestParent}`}>
        <div className={`${s.risktestBox}`}>
          <img src={risktest} className={`${s.risktestImg}`} />
          <QueueAnim interval={500} type="scale"  component='div' className={`${s.resultBox}`} >
            {this.state.flag == 0 ? (
              <div key="a" className={`${s.resultBox}`}>
                <img src={risktest1} className={`${s.risktest1Img}`} />
                <div className={`${s.tipStr} text-center`}>{this.state.resultStr}</div>
                <div>恭喜您完成风险评测，快去选择喜爱的理财产品吧！</div>
                <div
                  className={`${s.btn1}`}
                  onClick={() => {
                    hashHistory.push("/projectList");
                  }}
                >
                  查看产品
                </div>
                <div className={`${s.btn2}`} onClick={this.next.bind(this, 1)}>
                  重新测评
                </div>
              </div>
            ) : null}

            {this.state.flag == 1 ? (
              <div key="b" className={`${s.answerBox}`}>
                <div>安心投个人风险承受能力评估问卷</div>
                <div>
                  应国家监管部门的要求，投资互联网金融产品的用户必须具有相应的风险承受能力，只有符合一定条件用户才能购买互联网金融理财产品，为了确保各位用户达到合格投资者的要求，安心投邀请您参与下面的问卷评估，我们将根据您的答卷情况评估您的投资风险承受能力。
                </div>
                <div className={`${s.btn2}`} onClick={this.next.bind(this, 2)}>
                  现在评测
                </div>
                <div
                  className={`${s.btn1}`}
                  onClick={() => {
                    hashHistory.push("/my/accountManage");
                  }}
                >
                  我在想想
                </div>
              </div>
            ) : null}
            
            {/* {this.state.flag == 2 ? (
              <div key="c" className={`${s.answerBox}`}>
                <div>{ques[0].question}</div>
                <div className={`${s.listBox}`}>
                    <div className={`${s.listItem} ${resultArr[0]==1 ?s.activeItem:''}`} onClick={this.onSelect.bind(this,0,1)}>{ques[0].answers[0]}</div>
                    <div className={`${s.listItem} ${resultArr[0]==2 ?s.activeItem:''}`} onClick={this.onSelect.bind(this,0,2)}>{ques[0].answers[1]}</div>
                    <div className={`${s.listItem} ${resultArr[0]==3 ?s.activeItem:''}`} onClick={this.onSelect.bind(this,0,3)}>{ques[0].answers[2]}</div>
                    <div className={`${s.listItem} ${resultArr[0]==4 ?s.activeItem:''}`} onClick={this.onSelect.bind(this,0,4)}>{ques[0].answers[3]}</div>
                </div>
                <div
                  className={`${s.btn2}`}
                  onClick={this.next.bind(this,3)}
                >
                  下一题
                </div>
                
              </div>
            ) : null}

            {this.state.flag == 3 ? (
              <div key="d" className={`${s.answerBox}`}>
              <div>{ques[1].question}</div>
                <div className={`${s.listBox}`}>
                    <div className={`${s.listItem} ${resultArr[1]==1 ?s.activeItem:''}`} onClick={this.onSelect.bind(this,1,1)}>{ques[1].answers[0]}</div>
                    <div className={`${s.listItem} ${resultArr[1]==2 ?s.activeItem:''}`} onClick={this.onSelect.bind(this,1,2)}>{ques[1].answers[1]}</div>
                    <div className={`${s.listItem} ${resultArr[1]==3 ?s.activeItem:''}`} onClick={this.onSelect.bind(this,1,3)}>{ques[1].answers[2]}</div>
                    <div className={`${s.listItem} ${resultArr[1]==4 ?s.activeItem:''}`} onClick={this.onSelect.bind(this,1,4)}>{ques[1].answers[3]}</div>
                </div>
                <div
                  className={`${s.btn2}`}
                  onClick={this.next.bind(this,3)}
                >
                  下一题
                </div>
              </div>
            ) : null} */}
            {ques.map((item,index)=>{
                let outIndex = index
                return (
                    that.state.flag == (index+2) ? (
              <div key={index} className={`${s.answerBox}`}>
              <div>{ques[index].question}</div>
                <div className={`${s.listBox}`}>
                {item.answers.map((item2,index)=>{
                    return <div key={index} className={`${s.listItem} ${resultArr[outIndex]==(index+1) ?s.activeItem:''}`} onClick={this.onSelect.bind(this,outIndex,(index+1))}>{item.answers[index]}</div>
                })}
                </div>
                {that.state.flag>2?<div
                  className={`${s.btn1}`}
                  onClick={this.prev.bind(this,(index+1))}
                >
                  上一题
                </div>:null}
                <div
                  className={`${s.btn2}`}
                  onClick={this.next.bind(this,(index+3)>=12?0:(index+3))}
                >
                  下一题
                </div>
              </div>
            ) : null
                )
            })}
          </QueueAnim>
        </div>
      </div>
    );
  }
}
